<template>
    <div class="delete">
        <el-card>
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input v-model="search.wd" placeholder="搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="items.list">
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="href" label="播放地址"></el-table-column>
                <el-table-column prop="storyline" label="故事简介"></el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="items.pages"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "delete",
        data() {
            return {
                search: {wd: ""},
                items: [],
                currentPage: 1,
            }
        },
        mounted() {
            this.loadItem()
        },
        methods: {
            onSubmit() {
                this.$http.get("/search", {params: this.search}).then((res) => {
                    if (res.data.code = 0) {
                        this.items.list = res.data.data
                    }
                })
            },
            loadItem() {
                this.$http.get("/items", {params: {start: this.currentPage}}).then((res) => {
                    this.items = res.data.data
                })
            },
            handleCurrentChange() {
                this.currentPage++;
                this.loadItem();
            }
        }
    }
</script>

<style scoped>
    .el-card {
        padding-top: 0;
    }
</style>